<template>
  <div class="app-container">
    <TheQueryForm :option="searchOption" @onSubmit="onSubmit" @onClear="onClear"></TheQueryForm>
    <el-row style="margin-bottom: 20px">
      <el-col :span="12">
        <el-radio-group
          size="small"
          v-model="queryParams.auditResultCode"
          @change="(e) => (queryParams.auditResultCode = e)"
        >
          <el-radio-button label>全部</el-radio-button>
          <el-radio-button label="AUDITING" style="position: relative">
            待审核
            <el-badge v-if="waitAuditCount>0" class="badge" :value="waitAuditCount" :max="99"></el-badge>
          </el-radio-button>
          <el-radio-button label="PASS">审核通过</el-radio-button>
          <el-radio-button label="REFUSE">审核拒绝</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="12" style="display: flex; justify-content: flex-end">
        <el-button size="small" :loading="exportLoading" @click="handleExport">导出Excel</el-button>
      </el-col>
    </el-row>
    <TheTable
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
      :renderFunc="renderFunc"
      :autoPlay="false"
    />
  </div>
</template>
<script>
import { apiAuditPage, apiAuditWaitAuditCount } from "@/api/worker.js";
import { apiServiceCategoryTree } from "@/api/serviceCategory.js";
import { filterAuditResultCode } from "@/filters/index";
import TheQueryForm from "@/components/TheQueryForm/index.vue";
import TheTable from "@/components/TheTable/index.vue";
export default {
  components: { TheQueryForm, TheTable },
  data() {
    const _this = this;
    return {
      queryPageApi: apiAuditPage,
      queryParams: {
        auditResultCode: ""
      },
      waitAuditCount: 0,
      pageNo: 1,
      limit: 10,
      exportLoading: false,
      searchOption: [
        {
          field: "userPhoneNumber",
          label: "手机号",
          placeholder: "手机号",
          type: "Input"
        },
        {
          field: "identityCardNumber",
          label: "身份证号",
          placeholder: "身份证号",
          type: "Input"
        },

        {
          type: "Select",
          field: "categoryId",
          label: "服务类目",
          placeholder: "服务类目",
          options: [],
          optionsValue: "categoryId",
          optionsKey: "categoryName",
          api: apiServiceCategoryTree,
          defaultValue: ""
        },
        {
          type: "DatePickerRange",
          field: "time",
          label: "申请时间",
          placeholder: "申请时间"
        }
      ],
      tableOption: [
        {
          label: "申请人信息",
          prop: "contractId",
          width: 150,
          render(createElement, { row }) {
            try {
              const dom = (
                <div class="row">
                  <div>姓名：{row.workerName}</div>
                  <div>手机号：{row.userPhoneNumber}</div>
                  <div>身份证号：{row.identityCardNumber}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },
        {
          label: "服务类目",
          prop: "categoryName",
          width: 150,
          render(createElement, { row }) {
            try {
              const child = row.categoryName.map(item => (
                <span class="mr10">{item.categoryName}</span>
              ));
              const dom = <span >{child}</span>;
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },
        {
          label: "状态",
          prop: "auditResultCode",
          width: 70,
          render(h, { row }) {
            if (row.auditResultCode == "REFUSE") {
              //auditResultCode  待入驻 WAIT_AUDIT, // 审核中 AUDITING, // 审核成功 PASS, // 审核失败 REFUSE,
              return h("div", [
                h("el-tag", {
                  domProps: {
                    innerHTML: "审核拒绝"
                  },
                  props: {
                    type: "danger"
                  }
                }),
                h(
                  "el-tooltip",
                  {
                    props: {
                      effect: "dark",
                      content: row.auditResultMessage,
                      placement: "top"
                    }
                  },
                  [h("i", { class: "el-icon-question" })]
                )
              ]);
            } else if (row.auditResultCode == "PASS") {
              return <el-tag type="primary">审核通过</el-tag>;
            } else if (row.auditResultCode == "AUDITING") {
              return <el-tag type="warning">待审核</el-tag>;
            }
          }
        },
        {
          label: "申请时间",
          width: 80,
          prop: "auditTime",
          render(createElement, { row }) {
            try {
              const strArr = row.auditTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },

        {
          label: "操作",
          width: 80,
          prop: "",
          fixed: "right",
          render(h, { row }) {
            return h("div", [
              h("el-link", {
                domProps: {
                  innerHTML: "审核"
                },
                directives: [
                  {
                    name: "column-domItem-show",
                    value: ["AUDITING"].includes(row.auditResultCode) //待处理阶段显示
                  }
                ],
                props: {
                  type: "warning"
                },
                on: {
                  click() {
                    _this.$router.push({
                      path: "/worker/auditDetail",
                      query: { auditId: row.auditId, mode: "audit" }
                    });
                  }
                }
              }),
              h("el-link", {
                domProps: {
                  innerHTML: "查看"
                },
                props: {
                  type: "primary"
                },
                directives: [
                  {
                    name: "column-domItem-show",
                    value: ["PASS", "REFUSE"].includes(row.auditResultCode) //待处理阶段显示
                  }
                ],
                on: {
                  click() {
                    _this.$router.push({
                      path: "/worker/auditDetail",
                      query: { auditId: row.auditId, mode: "view" }
                    });
                  }
                }
              })
            ]);
          }
        }
      ]
    };
  },
  methods: {
    renderFunc(res) {
      apiAuditWaitAuditCount().then(result => {
        this.waitAuditCount = result.data;
      });
      return res;
    },
    // 导出
    async handleExport() {
      this.exportLoading = true;
      const res = await apiAuditPage({
        pageNum: 1,
        pageSize: -1,
        ...this.queryParams
      });
      if (res.code === "SUCCESS") {
        let header = [
          {
            prop: "",
            title: "师傅入驻审核",
            children: [
              {
                title: "姓名",
                prop: "workerName",
                valueType: "s"
              },
              {
                title: "手机号",
                prop: "userPhoneNumber",
                valueType: "s"
              },
              {
                title: "身份证号",
                prop: "identityCardNumber",
                valueType: "s"
              },
              {
                title: "服务类目",
                prop: "categoryName",
                valueType: "s"
              },
              {
                title: "状态",
                prop: "auditResultCode",
                valueType: "s"
              },
              {
                title: "申请时间时间",
                prop: "auditTime",
                valueType: "s"
              }
            ]
          }
        ];
        let dataSource = res.data.map(item => {
          return {
            ...item,
            auditResultCode: filterAuditResultCode(item.auditResultCode),
            categoryName: item.categoryName
              .map(item => item.categoryName)
              .join(",")
          };
        });
        const option = {
          dataSource: dataSource,
          header: header,
          fileName: `师傅入驻申请`
        };
        window.$Json2Excel(option);
        this.exportLoading = false;
      } else {
        this.$message({
          message: "导出操作失败,请重试",
          type: "warning"
        });

        this.exportLoading = false;
      }
    },

    onSubmit({ values }) {
      if (values.hasOwnProperty("time")) {
        values = {
          ...values,
          auditTimeBegin:
            values.time && values.time[0] ? values.time[0] + " 00:00:00" : "",
          auditTimeEnd:
            values.time && values.time[1] ? values.time[1] + " 23:59:59" : ""
        };
        delete values.time;
      }
      this.queryParams = values;
    },
    onClear() {
      this.queryParams = {
        auditResultCode: ""
      };
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-link {
  margin: 0 5px;
}
::v-deep .badge {
  position: absolute;
  right: -0px;
  top: -10px;
  transform: scale(0.9);
}
</style>
